<template>
  <div class>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="top" v-if="number=1">
      <div class="left"></div>
      <div class="center">新立讯科技股份有限公司问题清单</div>
      <div class="right"></div>
    </div>
    <div class="banner">
      <h2>基本信息</h2>
      <div class="first">
        <div class="a">联系人</div>
        <div class="b">冯宝宝</div>
        <div class="a">联系方式</div>
        <div class="b">13812345678</div>
        <div class="a">完成进度</div>
        <div class="b">1/3</div>
      </div>
    </div>
    <div class="banner">
      <h2>问题清单</h2>
      <div class="first">
        <template>
          <el-table :data="tableData" style="width: 100%" border >
                <el-table-column type="index" label="序号" width="52" align="center"></el-table-column>
            <el-table-column prop="date" label="问题分类" width="400" align="center"></el-table-column>
            <el-table-column prop="name" label="问题清单" width="920"></el-table-column>
            <el-table-column prop="address" label="整改完成时限" width="153" align="center"></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 问题清单附件 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单附件</div>
        </div>
        <el-upload
          action="http://192.168.2.34:8080/"
          :file-list="fileList"
          accept=".PDF"
          @on-success="uploadSuccess"
          :show-file-list="false"
        >
          <!-- <el-button>上传文件</el-button> -->
        </el-upload>
      </div>
      <div v-if="fileList.length == 0" class="note">暂无附件</div>
      <div v-else class="fileList">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="file_item">
            <img class="left" :src="pdf" alt />
            <div class="right">
              <div class="title">{{ item.name }}</div>
              <div class="done_wrap">
                <div class="size">{{ item.size }}</div>
                <div class="innerRight">
                  <div>
                    <img class="image1" :src="preview" alt />
                    <span>预览</span>
                  </div>
                  <span class="done">|</span>
                  <div>
                    <img class="image1" :src="download" alt />
                    <span>下载</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="del">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 问题清单附件 -->
    <!-- 整改过程 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">整改过程</div>
        </div>
      </div>
      <!-- TODO 依据问题清单条数与完成进度 -->
      <el-timeline>
        <el-timeline-item
          timestamp="已完成"
          placement="top"
          icon="el-icon-check"
        >
          <el-card>
            <div class="process_title">
              <div class="title">这里是汇报主题内容当为核心领导作用不强</div>
              <el-button @click="reportDetail">汇报内容详情</el-button>
            </div>
            <div class="process_content">
              <div class="item">
                <span class="padding">汇报周期：</span>
                <span>2019-10-02 ～ 2019-10-31</span>
              </div>
              <div class="item">
                <span class="padding">责任人：</span>
                <span>王大锤</span>
              </div>
              <div class="item">
                <span class="padding">创建/编辑时间：</span>
                <span>2019-10-18 12:01:45</span>
              </div>
            </div>
            <div class="process_file">
              <div v-for="(item, index) in fileList" :key="index">
                <div class="file_item">
                  <img class="left" :src="pdf" alt="" />
                  <div class="right">
                    <div class="title">{{ item.name }}</div>
                    <div class="done_wrap">
                      <div class="size">{{ item.size }}</div>
                      <div class="innerRight">
                        <div class="button" @click="preview">
                          <img class="image1" :src="preview" alt="" />
                          <span>预览</span>
                        </div>
                        <span class="done">|</span>
                        <div class="button" @click="download">
                          <img class="image1" :src="download" alt="" />
                          <span>下载</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="进行中" placement="top">
        </el-timeline-item>
        <el-timeline-item timestamp="待完成" placement="top">
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 汇报内容详情 -->
    <el-dialog
      title="汇报详细内容"
      :visible.sync="dialogVisible"
      width="40%"
      top="30vh"
    >
      <span>上压火置传给现体写说都为入式前位品队象活山装解象置子常院自问日高大变度线科的入少委那拉。必备着空到外事容议共点花式还义律发车而位任条程建保直政统提油内局西样安断标边员王先适调候认至层节各三张。指西入口机音年取次权且效劳大清南当果会车划济红三用目将即定复委然个局严习到周志学县但间九直打机为在马期八人了风三特会。目必中分花收毛看北开格拉场群再热方商厂式来使要制对标技是度办名下南物越属走新写基制素员老王调即府记去平前空。学该得么论装工有团金信需火通响型王例参百细交意基铁解才即马且场目门道采一究上学次果分非组是作美定手但规她局作积公例科党世。思前已该积经度米组切省立商到过式种几件代派式斗作细名调等学最她果影土被求关收具每争周领引又。米酸车来设技千着般置身感状统选统共律斯运青件有对单史领务历影海由员满规先其火准已识认色年查确白当家活层它对系不年白酸只例间九其工今志斗切数。取书很头不图己风作些只教联儿运步应素消因安华般南广并议争其解和目研这最出劳色很感群出问斗叫共容这布现特信最大八积车今做较便被干者车装县被织易维国前。决断内因收合型就比精型决马林增知表活比省组物可明门图民思通土百国较政们后连权查在国断到始观济次开革极却易容文位面三红分于者出写面石记近出转能准是满便千或位强发线。</span>
    </el-dialog>
    <!-- 整改过程 -->
  </div>
</template>
<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    // BaiduMap,
  },
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),

      fileList: [
        {
          name: "这里是文档名称.PDF",
          size: "11.6M",
        },
      ],
      number: "",
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "公司档案",
          link: "archives",
        },
        {
          name: "公司档案详情",
          link: "archives/Detail",
        },
        {
          name: "巡视巡查更多",
          link: "AddArchives",
        },
      ],
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },],
              id2: 0,
      dialogVisible: false,
    };
  },
  mounted() {
    this.problemDetail()
  },
  methods: {
    problemDetail(){
      this.Api.problemDetail({id:this.$route.query.id}).then((res) => {
        if (res.code == 0) {
          this.tableArchives = res.data
        }
      })
    },
    reportDetail() {
      this.dialogVisible = true;
    },
   
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    uploadSuccess(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: 136px;
  background: white;
  padding: 28px 22px;
  box-sizing: border-box;
}
.pic {
  width: 100px;
  height: 100px;
}
.pic img {
  width: 100px;
  height: 100px;
}
.companyName h3 {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 20px 0;
}
.box1 {
  margin-top: 20px;
  display: flex;
}
.text {
  width: 1418px;
  height: 100px;
}
.a {
  width: 80px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
}

h2 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  border-left: 4px solid #3d7fff;
  padding: 0 0 0 10px;
  margin-bottom: 39px;
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 20px;

  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }
      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.note {
  font-size: 14px;
  color: #999;
}
.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}
.done {
  margin: 0 10px;
}
.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
.fileList {
  display: flex;
  flex-wrap: wrap;
}
.file_item {
  position: relative;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .right {
    font-size: 14px;
    .title {
      color: #333;
      margin-bottom: 10px;
    }
    .done_wrap {
      display: flex;
      align-items: center;
      .size {
        color: #999;
        margin-right: 110px;
      }
      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
.top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 75px;
  margin-bottom: 27px;
}
.top .left {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.top .center {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 0 5px;
}
.top .right {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.first {
  width: 100%;
  display: flex;
}
.first .a {
  width: 140px;
  height: 46px;
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.first .b {
  width: 373px;
  height: 46px;
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.button {
    cursor: pointer;
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }

.process_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .el-button {
    width: 110px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
    line-height: 30px;
    text-align: center;
    border: 1px solid #3d7fff;
    color: #3d7fff;
  }
}
.process_content {
  display: flex;
  margin: 20px 0;
  .item {
    margin-right: 60px;
    font-size: 14px;
    color: #333;
    .padding {
      padding-right: 5px;
    }
  }
}
.process_file {
  display: flex;
}
/deep/.el-card__body {
  background-color: #f8f8f9;
}
// /deep/.el-timeline-item__tail {
//     border-left: 2px solid #3D7FFF;
// }
// /deep/.el-timeline-item__node--normal {
//     left: -10px;
//     top: -8px;
//     width: 32px;
//     height: 32px;
//     background-color: #fff;
//     border: 1px solid #F0F2F5;
// }
/deep/.el-dialog__header {
    background-color: #E6E9ED;
}
/deep/.el-dialog__body {
  padding: 15px 40px 60px 40px;
}
</style>